<!-- 调查问卷 -->
<style scoped>
body {
    margin: 0px;
    padding: 0px;
}

#outBox {
    width: 650px;
    height: 900px;
    overflow-y: scroll;
    margin: 10px auto;
    background-color: #eee;
    line-height: 30px;
}

#textTitle {
    font-size: 20px;
    text-align: center;
    text-shadow: 3px 3px 3px lightpink;
    font-family: cursive;
    letter-spacing: 20px;
}
</style>
<template>
    <div id="outBox">
        <form>
            <h2 id="textTitle">知识竞答</h2>
            <ul v-for="(item, index) of items" :key="item.id">
                <h3 style="letter-spacing: 8px;font-family: cursive;margin-bottom: 2px;">
                    {{ item.id }}.{{ item.questionContent }}</h3>
                <ul v-for="(content, index) of item.answers" style="font-size: 12px;font-family: cursive;"
                    :key="content.id">
                    <input type="radio" :name="item.id" :value="content" v-model="selectAnser[item.id]">{{
                        content }}
                </ul>
            </ul>
            <input type="button" value="提交" @click="btn_push()">
        </form>
    </div>
</template>

<script setup>
import { ref } from 'vue';
// 获得用户单选框的值
let selectAnser = ref([])
// 存储答案的数组
let answers = [
    '海王星', '鲁迅', '960万平方公里', '罗贯中', 'Tank'
]
// 题目数组
let items = ref(
    [
        {
            id: 1,
            questionContent: '距离地球最遥远的星体:',
            answers: ['海王星', '木星', '冥王星', '火星']
        },
        {
            id: 2,
            questionContent: '朝花夕拾的作者是谁:',
            answers: ['鲁迅', '莎士比亚', '余华', '李清照']
        },
        {
            id: 3,
            questionContent: '我国的领土面积是多少:',
            answers: ['1000万平方公里', '800万平方公里', '960万平方公里', '1500万平方公里']
        },
        {
            id: 4,
            questionContent: '<<三国演义>>的作者是谁:',
            answers: ['施耐庵', '吴承恩', '罗贯中', '曹雪芹']
        },
        {
            id: 5,
            questionContent: '三国恋的演唱者:',
            answers: ['刘德华', 'Tank', '林俊杰', '周杰伦']
        },
    ]
)
// 提交按钮判断用户答题数
function btn_push() {
    // 定义一个初始值为0的变量，答对加一打错不动
    let count = 0;
    // 遍历答案数组 并使用find方法 如果用户选择的值在答案数组中初始值就加一 不在就不加
    answers.forEach(item => {
        let check = selectAnser.value.find(sItem => sItem === item)
        if (check) {
            count++;
        } else {
            count = count
        }
    })
    // 用户反馈
    alert(`恭喜你答对${count}题 答错${answers.length - count}题`)
}
</script>